import { defineComponent } from "vue";
import Back from "@/components/Back";
import ButtonView from "@/components/ButtonView";
import style from "./index.module.less";
import ListCard from "./components/ListCard";
import pointsPic from "./assets/pointsPic.png";
import { useRouter } from "vue-router";
import { dividerProps } from "vant";
export default defineComponent({
  setup(props, {}) {
    const router = useRouter();
    const tasks = [
      {
        name: "首次登陆平台",
        tips: "登陆平台获得15点积分",
        state: 1
      },
      {
        name: "通过帮用工发布用工需求",
        tips: "发布用工需求获得5点积分",
        state: 0
      },
      {
        name: "浏览帮政策30秒",
        tips: "在帮政策页面停留至少30秒获得5点积分",
        state: 0
      },
      {
        name: "其他",
        tips: "登陆平台获得15点积分",
        state: 1
      }
    ];
    const points = [
      {
        month: 10,
        receive: 200,
        use: 1000,
        details: [
          {
            name: "首次登陆平台",
            time: "2020-12-21",
            pointAdd: 12
          },
          {
            name: "首次登陆平台",
            time: "2020-12-21",
            pointAdd: 12
          },
        ]
      },
      {
        month: 10,
        receive: 200,
        use: 1000
      },
    ]
    const renderTask = () => (
      tasks.map((t, i) => {
        const btncolor = t.state === 1 ? "#C7C7C7" : "#07c160";
        const btText = t.state === 1 ? "已完成" : "未完成";
        const slots = {
          leftTop: () => <span >{t.name}</span>,
          leftBottom: () => <span class={["mt-7 flex items-center"]}><img src={pointsPic} class="float-left w-[14px] mr-5" />{t.tips}</span>,
          right: () => <ButtonView color={btncolor} text={btText}></ButtonView>
        };
        return (<div class={"mb-17"}><ListCard v-slots={slots}></ListCard></div>);
      })
    );
    const renderTop = () => (
      <div class={style["top"]}>
        <div class={[style["topHead"], "h-[161px] pt-15 px-14 pb-22"]}>
          <p class={"text-18 font-bold"} >当前共富积分</p>
          <p>
            <span class="text-[55px]">1560</span> 
            <span class=" float-right inline-flex w-[116px] h-[30px] justify-between items-center  bg-black text-white text-11 py-7 px-10 mt-18" style={{"border-radius": "9999px"}}
            onClick={()=>{router.push("/exchange")}}>
              积分兑换奖励 <span>{">"}</span>
            </span>
          </p>
          <div class={style["progressWrap"]}>
            <span style={{width: "20%"}}></span>
          </div>
        </div>
        <div class={"px-14 py-14"}>
          <p class="text-[16px] font-bold mb-7">每日任务</p>
          {renderTask()}
          <p class={["text-[16px] font-bold pt-17", style["alltask"]]}>全部任务</p>
        </div>
      </div>
    );
    const renderPoints = () => (
      <div class={style["points"]}>
        <p class="text-16 font-bold px-14">积分明细</p>
        {points.map((p, i) => {
          return (
            <div class={style["pItemWrap"]}>
              <div class={["flex justify-between text-14 p-14", style["pItem"]]}>
                <span class="text-black">2022.10</span>
                <span>获得5</span>
                <span>使用</span>
                <span>{">"}</span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          mmmmmm
              </div>
              <div class={style["pItemDetaiswrap"]}>
                {p.details?.map((detail, i) => {
                  const slots = {
                    leftTop: () => <span >{detail.name}</span>,
                    leftBottom: () => <span class="mt-5">{detail.time}</span>,
                    right: () => <span style={{color:"#CE0000", fontSize:"12px"}}>+{detail.pointAdd}</span>
                  };
                  return <div class={style["pItemDetais"]}><ListCard v-slots={slots}></ListCard></div>
                })}
              </div>
            </div>
          )
        })}
      </div>
    )
    return () => (
      <div class={[style["index"]]}>
        <Back text="共富积分" />
        {renderTop()}
        {renderPoints()}
      </div>
    );
  },
});